2023/12/232222字符

项目搭建

vite

创建开发构建工具 npm init vite-app <project-name> 或 yarn create vite-app <project-name>

下载依赖包：npm install

vite + React 搭建项目

创建项目 npm init vite-app vite_react
初始化项目： npm init -y
安装依赖： npm i -D @pika/react @pika/react-dom vite vite-plugin-react react react-dom
添加配置文件 vite.config.js

module.exports = {
    jsx: 'react',
    plugins: [require('vite-plugin-react')]
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
</head>
<body>
    <div id="root"></div>
    <script type="module" src="/src/mail.jsx"></script>
</body>
</html>

新建 src/mail.jsx

import React from 'react'
import ReactDOM from 'react-dom'

function App () {
    return <>hello</>
}

ReactDOM.render(<App />, document.getElementById('root'));

配置 package.json 执行命令

"scripts": {
    "dev": "vite",
    "build": "vite build"
},

运行项目：npm run dev

vite + React + TypeScript

继续添加配置文件 tsconfig.json

{
    "compilerOptions": {
        "target": "es5",
        "lib": [
            "dom",
            "dom.iterable",
            "esnext"
        ],
        "allowJs": true,
        "skipLibCheck": true,
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "strict": true,
        "forceConsistentCasingInFileNames": true,
        "noFallthroughCasesInSwitch": true,
        "module": "esnext",
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "noEmit": true,
        "jsx": "react"
    },
    "include": [
        "src"
    ]
}

安装依赖： npm install -D @types/react @types/react-dom

如何支持 sass

安装依赖： npm i -D node-sass sass typed-scss-modules @types/node-sass

项目地址